class Labels extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            id: '0',
            code: '',
           listhtml:[],
            start:0,
            pagesize:15
        };
    }
    formatlist(list) {
        let listitem = [],wulist=[];
        if(list.length>0){
            list.forEach((x, i) => {
                console.log(x, i)
                listitem.push(
                    <tr key={i}>
                        <td>{x.name}</td>
                        <td className="operatebox">
                            <div className='operate' id={"ope" + x.id}>
                                <div>
                                    <img src="./src/del.png" />
                                    <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                </div>
    
    
                            </div>
                        </td>
                    </tr>
                )
            });
        } else {
            wulist.push(
                <p className="wulist">暂无数据</p>
            )
        }
        this.setState({listitem,list,originallist:list,wulist})
    }



    componentDidMount() {
        let lid = GetQueryString('id');// label = localStorage.getItem('label'),
        // console.log(label, 'label');
        // this.setState({lid})

        // if (label.length > 0 && Number(lid) > 0) {
        //     this.setState({ label, lid })
        // } else {
        //     window.history.go(-1);
        // }
        this.setState({lid},()=>{
            this.freshlist();
        })
    }

    freshlist() {
        var {lid} = this.state;
        getlabelslist(lid, res => {
            if (res.issuccess == 1) {
                console.log(res);
                this.formatlist(res.list)
               
            }
        })
    }
    // edit(e){
    //     window.location.href='./goods.html?id='+e
    // }
    // lid(id,name){
        
    //     localStorage.setItem('subcategoryname',name);
    //     window.location.href=('subgoodslist.html?id='+id) 
    // }
    // toorder(id){
    //     let {ishide} = this.state;
    //     $('#ishide'+id).toggle();
    //     console.log(ishide,'hide');
    //     this.setState({ishide});
    //     $("#sub"+id).val('');
    // }
    // setcategoryorder(id){
    //     let order = $("#sub"+id).val(),data,{lid}=this.state
    
    //     if(isNaN(order)||order<1||order>999){
    //         alert('请输入1-999的正整数');
    //         return;
    //     }
    //     order = Math.floor(order);
    //    data={id,order};
    //     setsuborder(data,res=>{
    //         if(res.issuccess==1){
                
    //             console.log("设置成功");
    //         }
    //     });

    //     this.freshlist(lid);
    // }
    // togoodsorder(id){
    //     $('#hide'+id).toggle();
    //     $("#goods"+id).val('');
    // }
    // setgoodsorder(id){
    //     let order = $("#goods"+id).val(),data,{lid}=this.state
      
    //     if(isNaN(order)||order<1||order>999){
    //         alert('请输入1-999的正整数');
    //         return;
    //     }
    //     order = Math.floor(order);
    //    data={id,order};
    //     setgoodsorder(id,order,res=>{
    //         if(res.issuccess==1){
    //             console.log("设置成功");
    //         }
    //     });
    //     this.freshlist(lid);
    // }
    add() {
        this.setState({ id: '0' })
    }
    inputchange(e) {
        this.setState({ name: e.target.value })
    }
    // inputcode(e) {
    //     this.setState({ code: e.target.value })
    // }
    // clickupload() {
    //     $('#file').click();
    // }
   
   

    // del_detail_img(){
    //     this.setState({finishupload:!1,thumburl:''})
    // }
    // filechange(e){
    //     var that = this;
    //   this.setState({
    //       finishupload:!1,
    //       uploadword:"上传"
    //     })
    //   var that = this;
    //   var filecode = this.state.filecode;
    //   console.log(filecode,'filecode');
    //   var filedata = $('#file')[0].files[0];
      
    //   var reader = new FileReader();
    //   reader.readAsDataURL(filedata);
    //   reader.onload= function (e) {
    //     //   var thumburl = e.target.result;
    //     //   that.setState({thumburl})
    //    //  that.putlistdata(filecode,[base64str])
    //       }
    //   }
    //   upload(){
    //     var that = this;
    //     var thumburl = this.state.thumburl;
    //     if(!isBase64(thumburl)){
    //         alert('请先选择图片')
    //         return;
    //     }
    //   uploadimg(thumburl,res=>{
    //       that.setState({
    //       finishupload:!0,
    //       thumburl:`${API_HEAD}imgs/${res.path}`
    //     })
    //   })
      
    //   }
    submit() {
        var { name,lid } = this.state, err = '';
        
        
        
        if (name == '') err = '请填写二级标签名称';
        // if (code.length == 0) err = '请填写分类编码';
        // if(thumburl.length == 0)err = "请上传分类图片";
        if (err.length > 0) {
            alert(err);
            return;
        }
        
        // thumburl=thumburl.substring(thumburl.lastIndexOf("/")+1,thumburl.length);
        // var src = thumburl;
        var data = { name,lid};
       
        addlabels(data, res => {
            if (res.issuccess == 1) {
                alert('添加成功')
                this.setState({ name: '' })
                this.freshlist();
            }
        })
    }
    // edit(e) {
    //     var list = this.state.list;
    //     var item = {};
    //     list.forEach(x => {
    //         if (x.id == e) {
    //             console.log('code', x.lid);

    //             this.setState({
    //                 thumburl: x.picpath,
    //                 name: x.name,
    //                 code: x.lid,
    //                 id: x.id,
    //                 clicknew: !0,
                   
    //             })
    //         }
    //     });
    // }
    del(e) {
     
        this.setState({ delid: e})
        $('#myModal').modal('toggle');
    }
    confirmdel() {
        let { delid } = this.state
        dellabels( delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist()
            } else {
                $('#myModal').modal('toggle');
                alert(res.msg);
            }
        })
    }
    toback(){
        window.location.href = "./label.html";
    }

    render() {
        let { wulist } = this.state;
        return (
            <div className="breadLinebox">
            <Modal content='确定删除吗？' click={this.confirmdel.bind(this)} />

            <div className="modal fade" id="modalOne" >
                    <div className="modal-dialog">
                        <div className="modal-content">

                        <div className="modal-header border">
                            <p className="modal-title">新建</p>
                            <img data-dismiss="modal" src="./src/close.png"/>
                                    </div>
                        <div className="modal-body">
                        <div className="input-group">
                           
                                <span className="">标签名称</span>
                                <input id='name' onChange={this.inputchange.bind(this)} value={this.state.name} type="text" placeholder='请输入标签名称' className="input" />
                            </div>
                           
            
                        </div>
                        <div className="modal-footer border">
                            <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                            <button type="button" onClick={this.submit.bind(this)} data-dismiss="modal"  className="submitmod">提交</button>
                        </div>

                        </div>
                        </div>
                    </div>

            <div className='content_wrap panel-default content_wrap'>
                <div className='breadLine '>
                    当前位置 > <span onClick={this.toback.bind(this)} style={{ cursor: 'pointer' }}>标签管理</span> > 二级标签管理
                        </div>
                <div className="content">
                    <div className="tabletit" >
                        <p className="add" data-toggle="modal" data-target="#modalOne" onClick={this.add.bind(this)}>新建二级分类标签</p>
                       
                    </div>
           


                    <table className="tab">
                        <thead>
                            <tr>

                                <th>标签名称</th>
                                <th className="cz tconter">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.listitem}
                        </tbody>
                    </table>
                    {wulist }
                </div>
            </div>






        </div>



            // <div className='content_wrap panel-default content_wrap'>
            //     <Modal content='确定删除吗？' click={this.confirmdel.bind(this)} />
            //     <div className='breadLine '>
            //         当前位置 > 标签管理
            //             </div>
            //     <div className='inputs panel-body'>
            //         <h3>{this.state.label} ——二级标签管理</h3>
            //         <button onClick={this.add.bind(this)} className='btn add btn-primary center' >新建二级分类标签</button>
            //         <div style={{ display: this.state.clicknew ? "" : "none" }}>
            //             <div className="input-group input-group">
            //                 <span className="input-group-addon ">标签名称</span>
            //                 <input id='name' onChange={this.inputchange.bind(this)} type="text" value={this.state.name} placeholder='请输入标签名称' className="form-control " />
            //             </div>
                     
                      
            //             <button onClick={this.submit.bind(this)} className='btn submit btn-primary center ' >确定添加</button>
            //         </div>

            //         <table className="table table-hover">
            //             <thead>
            //                 <tr>
            //                     <th>标签名称</th>
                                
            //                     <th>操作</th>
            //                 </tr>
            //             </thead>
            //             <tbody>
            //                 {this.state.listhtml}
            //             </tbody>
            //         </table>

            //     </div>
               
            // </div>
        )
    }
}





ReactDOM.render(
    <div>
        <TopLine />
        {/* <LeftMenu code='8' /> */}
        <LeftMenu code='label' />
        <Labels />
    </div>
    //<Barrage/>
    , $('.container')[0]
)